<template>
  <div class="mod-role">
    <el-form
      class="formEl"
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
      label-width="100px"
    >
      <el-form-item label="球队名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="球队名称"></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select
          v-model="dataForm.enableFlag"
          value-key="name"
          filterable
          clearable
        >
          <el-option
            v-for="item in enableFlagData"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%"
    >
      <el-table-column prop="name" label="球队名称" align="center">
      </el-table-column>
      <el-table-column prop="logo" label="LOGO" width="150" align="center">
        <template #default="scope">
          <div style="display: inline-flex">
            <img :src="scope.row.logoUrl" width="63px" height="91px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="teamLeaderName" label="队长" align="center">
      </el-table-column>
      <el-table-column prop="rate" label="评分" align="center">
      </el-table-column>
      <el-table-column
        prop="enableFlag"
        width="140"
        label="是否启用"
        align="center"
      >
        <template #default="scope">
          <el-button
            :type="scope.row.enableFlag === 1 ? 'success' : ''"
            size="small"
            >{{ scope.row.enableFlag === 1 ? "是" : "否" }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="120"
        label="创建时间"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        width="120"
        label="更新时间"
        align="center"
      >
      </el-table-column>
      <el-table-column width="110" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row)"
            style="padding: 0px"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="enableFlagChange(scope.row)"
            style="padding: 0px"
            :style="scope.row.enableFlag === 1 ? 'color: red' : 'color: green'"
            >{{ scope.row.enableFlag === 1 ? "禁用" : "启用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./edit.vue";
import { request } from "@/utils/axios-util";

export default {
  data() {
    return {
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      enableFlagData: [
        { name: "是", code: 1 },
        { name: "否", code: 0 },
      ],
    };
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      request(
        "/admin/teamInfo/list",
        {
          appCode: userInfo.appCode,
          tenantId: userInfo.tenantId,
          leagueCode: userInfo.leagueCode || "MFEL2024S02",
          ...this.dataForm,
        },
        "POST"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.dataList = res.data;
          } else {
            this.dataList = [];
            this.$message.error(res.msg);
          }
          this.dataListLoading = false;
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row);
      });
    },
    // 启用、禁用
    enableFlagChange(row) {
      request(
        "/admin/teamInfo/enable",
        {
          id: row.id,
          enableFlag: row.enableFlag === 1 ? 0 : 1,
        },
        "POST"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.getDataList();
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
  },
};
</script>
<style type="text/sass" scoped>
.formEl {
  display: flex;
  flex-wrap: wrap;
}

.page {
  float: right;
  margin-top: 10px;
}
</style>
